<section class="content-header">
  <h1>
      {{title}}
  </h1>
</section>

<!-- Main content -->
<section class="content">
  <!-- <div class="row" style="clear:both;">
    <div class="colLegend">
      <div class="legendItem" *ngFor="let item of legendConfig;">
        <div class="itemRect" [style.backgroundColor]="item.color"></div>
        <div class="itemText">{{item.text}}</div>
      </div>
      <div class="legendText">单位：分</div>
    </div>
    <div class="colSection" [style.width]="colWidth" *ngFor="let item of colData;">
      <div class="colMain" [style.height]="colHeight">
        <div *ngFor="let key of objectKeys(item);" [style.height]="geneHeight(key, item)" [style.lineHeight]="geneHeight(key, item)" [style.backgroundColor]="geneColor(key)">
          {{key != 'equipment' ? item[key] : ''}}
        </div>
      </div>
      <div class="colText">
        {{formatEquipmentName(item.equipment)}}
      </div>
    </div>
  </div> -->
  <div class="row">
    <div class="col-md-3 col-md-push-9">
      <div class="box box-default">
          <div class="box-header with-border">
              <h3 class="box-title">查询区域</h3>
              <div class="box-tools pull-right">
                  <button type="button" class="btn btn-box-tool" data-widget="collapse">
                      <i class="fa fa-minus"></i>
                  </button>
              </div>
          </div>
          <!-- /.box-header -->
          <div class="box-body">
              <div class="form-group">
                  <label for="DateTimeRange">时间</label>
                  <input type="text" class="form-control pull-right" id="DateTimeRange" placeholder="请选择日期" />
              </div>
              <div class="form-group">
                  <label>区域</label>
                  <dx-select-box #subArea style="width:100%;height:35px;margin-bottom:10px;border-radius: 0px"
                      [items]="subAreaItems" displayExpr="subArea" [(selectedItem)]="subAareSelected"
                      (onValueChanged)="onSubAreaSelectedChange($event)" [value]="subAreaItems[0]"
                      [searchEnabled]="true">
                  </dx-select-box>
              </div>
              <div class="form-group">
                  <label>设备</label>
                  <dx-drop-down-box #dddb style="width:100%;height:35px;margin-bottom:10px;border-radius: 0px"
                      [(value)]="equipmentSelected" displayExpr="equipment" placeholder="请选择工位" [showClearButton]="true"
                      [dataSource]="equipemntItems">
                      <dxo-drop-down-options [width]="510" [height]="310"></dxo-drop-down-options>
                      <div *dxTemplate="let data of 'content'">
                          <button type="button" (click)="clearEquipmentSelected()" class="btn btn-default btn-sm"
                              title="重置">重置</button>&nbsp;&nbsp;&nbsp;
                          <button type="button" (click)="equipmentSelectedOk()" class="btn btn-info btn-sm" title="确定">确定</button>
                          <dx-data-grid #ddg [dataSource]="equipemntItems" [hoverStateEnabled]="true" [paging]="{ enabled: true, pageSize: 1000 }"
                              [filterRow]="{ visible: true }" [(selectedRowKeys)]="equipmentSelected" [scrolling]="{ mode: 'infinite' }"
                              [height]="265" [showColumnLines]="true" [showRowLines]="true" [showBorders]="true"
                              [rowAlternationEnabled]="true">
                              <dxo-selection [selectAllMode]="allPages" [showCheckBoxesMode]="always" mode="multiple"></dxo-selection>
                              <dxi-column dataField="equipmentType" caption="设备类型" [width]="100">
                              </dxi-column>
                              <dxi-column dataField="supplier" caption="供应商" [width]="100">
                              </dxi-column>
                              <dxi-column dataField="stationCode" caption="工位" [width]="100">
                              </dxi-column>
                              <dxi-column dataField="equipment" caption="设备" [width]="100">
                              </dxi-column>
                          </dx-data-grid>
                      </div>
                  </dx-drop-down-box>
              </div>
              <div class="form-group">
                  <label>班次</label>
                  <dx-select-box #shift style="width:100%;height:35px;margin-bottom:10px;border-radius: 0px"
                      [items]="shiftItems" displayExpr="shiftName" [(selectedItem)]="shiftSelected" [value]="shiftItems[0]"
                      [searchEnabled]="true">
                  </dx-select-box>
              </div>
          </div>
          <div class="box-footer">
              <button type="button" class="btn btn-primary" (click)="getEquipmentData()"> 查 询 </button>
          </div>
      </div>
    </div>
  </div>
  <div class="row tab_echarts">
    <ul class="tab_nav">
      <li class="tab_nav_li" [ngClass]="!barSelected ? 'tab_nav_li_selected' : 'tab_nav_li_unSelected'" (click)="tabSelect(0)">折线图</li>
      <li class="tab_nav_li" [ngClass]="barSelected ? 'tab_nav_li_selected' : 'tab_nav_li_unSelected'" (click)="tabSelect(1)">柱状图</li>
  </ul>
  </div>
  <div class="row" *ngIf="barSelected">
    <div echarts [options]="chartOption1_bar" class="charts_full"></div>
    <div echarts [options]="chartOption2_bar" class="charts_full"></div>
  </div>
  <div class="row" *ngIf="!barSelected">
    <div echarts [options]="chartOption1_line" class="charts_full"></div>
    <div echarts [options]="chartOption2_line" class="charts_full"></div>
  </div>
</section>